{% extends "html/base_layout.html" %}

{% block title %}homepage{% endblock %}

{######################################################################
    content BLOCK
######################################################################}

{% block content %}

<button type="button" id="test_button">Test</button>

<div class="row">
    <div class="col-md-12">
        <p>
            <span class="h1">Projects</span>
            <a href="add-project" class="btn-link" title="Add new project">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
            </a>
        </p>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th class="col-md-1">No</th>
                    <th class="col-md-10">Name</th>
                    <th class="col-md-1">Action</th>
                </tr>
            </thead>
            <tbody>
{% for project in project_records %}
                <tr>
                    <td class="col-md-1">{{loop.index}}</td>
                    <td class="col-md-10">{{project.name}}</td>
                    <td class="col-md-1">
                        <a href="edit-project?key={{project.key.urlsafe()}}" class="btn-link" title="Edit this item">
                            <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
                        </a>
                        <a href="delete-project?key={{project.key.urlsafe()}}" class="btn-link" title="Delete this item">
                            <span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>
                        </a>
                    </td>
                </tr>    
{% endfor %}
            </tbody>
        </table>
    </div>
</div>


<h1>[START]</h1>

<span class="h1">Projects</span>
<button data-toggle="modal" data-target="#addProjectModal" class="btn-link">
    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</button>

<div id="content" class="row"></div>

<h1>[END]</h1>

<div class="modal fade" id="addProjectModal" tabindex="-1" role="dialog" aria-labelledby="addProjectModalLabel">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Add Project</h4>
            </div>
            <div class="modal-body">
                <p>One fine body&hellip;</p>
                <form className="addProjectForm">
                    <input type="text" placeholder="Project name" />
                    <input type="text" placeholder="Project description" />
                    <input type="submit" value="Post" />
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

{% endblock %}

{######################################################################
    script BLOCK
######################################################################}

{% block scripts %}

    <script type="text/jsx">
        // Your code here
        var datax = [
            {author: "Pete Hunt", text: "This is one comment"},
            {author: "Jordan Walke", text: "This is *another* comment"}
        ];
        
        // Define react components
        var ProjectList = React.createClass({
            
            loadCommentsFromServer: function() {
                
                jQuery.ajax({
                    url: this.props.url,
                    dataType: 'json',
                    cache: false,
                    success: function(data) {
                        this.setState({data: data});
                    }.bind(this),
                    error: function(xhr, status, err) {
                        console.error(this.props.url, status, err.toString());
                        
                    }.bind(this)
                });
            },
            getInitialState: function() {
                return {data: []};
            },
            componentDidMount: function() {
                this.loadCommentsFromServer();
                setInterval(this.loadCommentsFromServer, this.props.pollInterval);
            },
            render: function () {
                var projectRows = this.state.data.map(function (project) {
                    return (
                        <tr>
                            <td className="col-md-1">1</td>
                            <td className="col-md-10">{project}</td>
                            <td className="col-md-1">
                                <a href="edit-project?key=" className="btn-link" title="Edit this item">
                                    <span className="glyphicon glyphicon-edit" aria-hidden="true"></span>
                                </a>
                                &nbsp;
                                <a href="delete-project?key=" className="btn-link" title="Delete this item">
                                    <span className="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>
                                </a>
                            </td>
                        </tr>
                    );
                });
                
                return (
                    <div className="col-md-12">
                    <table className="table table-striped">
                        <thead>
                            <tr>
                                <th className="col-md-1">No</th>
                                <th className="col-md-10">Name</th>
                                <th className="col-md-1">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            {projectRows}
                        </tbody>
                    </table>
                    </div>
                );
            }
        });

        var CommentList = React.createClass({
            render: function() {
                var commentNodes = this.props.data.map(function (comment) {
                  return (
                    <Comment author={comment.author}>
                      {comment.text}
                    </Comment>
                  );
                });
                
                return (
                  <div className="commentList">
                    {commentNodes}
                  </div>
                );
            }
        });
          
        var CommentForm = React.createClass({
            render: function() {
                return (
                  <form className="commentForm">
                    <input type="text" placeholder="Your name" />
                    <input type="text" placeholder="Say something..." />
                    <input type="submit" value="Post" />
                  </form>
                );
            }
        });
        
        var Comment = React.createClass({
            render: function() {
                return (
                  <div className="comment">
                    <h2 className="commentAuthor">
                      {this.props.author}
                    </h2>
                    {this.props.children}
                  </div>
                );
            }
        });
        
        var CommentBox = React.createClass({
            render: function() {
                return (
                  <div className="commentBox">
                    <h1>Comments</h1>
                    <CommentList data={this.props.data} />
                    <CommentForm />
                  </div>
                );
            }
        });
        
        React.render(
            <ProjectList url="/ws/config" pollInterval="30000" />,
            document.getElementById('content')
        );
        
    </script>
    
    <script type="text/javascript">
        (function ($) {
            $("#test_button").click(function () {
                // Make AJAX call here
                window.alert('OK');
                $.ajax({
                    url: "/ws/config",
                    cache: false,
                    dataType: "json"
                })
                .done(function(json) {
                    // $( "#results" ).append( html );
                    debugger;
                });
            });
        }(jQuery));
    </script>
{% endblock %}